<template>
  <div class="ticket-container">
    <div class="ticket-settings">
      <h3>请选择在“外卖小票”上显示的内容</h3>
      <el-form label-width="120px">
        <el-form-item label="标题">
          <el-checkbox v-model="showStoreName">门店名称</el-checkbox>
          <el-checkbox v-model="showWelcomeMessage">头部欢迎语</el-checkbox>
          <el-checkbox v-model="showTicketType">票据类型</el-checkbox>
        </el-form-item>
        <el-form-item label="设置文案">
          <el-input v-model="welcomeMessage" placeholder="欢迎光临"></el-input>
        </el-form-item>
        <el-form-item label="配送信息">
          <el-checkbox v-model="showRecipientName">顾客姓名</el-checkbox>
          <el-checkbox v-model="showContactNumber">手机号码</el-checkbox>
          <el-checkbox v-model="showDeliveryAddress">配送地址</el-checkbox>
          <el-checkbox v-model="showDeliveryTime">配送时间/自提时间</el-checkbox>
          <el-checkbox v-model="showNotes">备注</el-checkbox>
        </el-form-item>
        <el-form-item label="订单信息">
          <el-checkbox v-model="showOrderNumber">订单编号</el-checkbox>
          <el-checkbox v-model="showOrderTime">下单时间</el-checkbox>
        </el-form-item>
        <el-form-item label="菜品信息">
          <el-checkbox v-model="showFoodDetails">菜品详情</el-checkbox>
          <el-checkbox v-model="showBoxFee">餐盒费</el-checkbox>
          <el-checkbox v-model="showDeliveryFee">配送费</el-checkbox>
        </el-form-item>
        <el-form-item label="结算信息">
          <el-checkbox v-model="showPaymentDetails">支付详情</el-checkbox>
          <el-checkbox v-model="showDiscountDetails">优惠详情</el-checkbox>
        </el-form-item>
        <el-form-item label="补充信息">
          <el-checkbox v-model="showStoreAddress">门店地址</el-checkbox>
          <el-checkbox v-model="showStorePhone">门店电话</el-checkbox>
<!--          <el-checkbox v-model="showOfficialAccountQR">公众号二维码</el-checkbox>-->
<!--          <el-checkbox v-model="showMiniProgramQR">小程序二维码</el-checkbox>-->
        </el-form-item>
        <el-form-item label="结束致谢语">
          <el-input v-model="thankYouMessage" placeholder="欢迎再次光临"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="saveSettings">保存</el-button>
      <el-button @click="cancelSettings">取消</el-button>
      <el-button type="danger" @click="resetSettings">恢复初始</el-button>
    </div>
    <div class="ticket-preview">
      <el-card class="ticket-card">
        <h3 v-if="showWelcomeMessage">{{ welcomeMessage }}</h3>
        <div v-if="showStoreName">门店名称: {{ storeName }}</div>
        <div v-if="showRecipientName">收货人：{{ recipientName }}</div>
        <div v-if="showContactNumber">联系电话：{{ contactNumber }}</div>
        <div v-if="showDeliveryAddress">配送地址：{{ deliveryAddress }}</div>
        <div v-if="showDeliveryTime">配送时间：{{ deliveryTime }}</div>
        <div v-if="showNotes">备注：{{ notes }}</div>
        <div v-if="showOrderNumber">订单编号：{{ orderNumber }}</div>
        <div v-if="showOrderTime">下单时间：{{ orderTime }}</div>
        <div v-if="showFoodDetails">
          <el-table :data="foodItems" border style="width: 100%">
            <el-table-column prop="name" label="菜品名称"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="price" label="小计"></el-table-column>
          </el-table>
        </div>
        <div v-if="showBoxFee">餐盒费：{{ boxFee }}</div>
        <div v-if="showDeliveryFee">配送费：{{ deliveryFee }}</div>
        <div v-if="showPaymentDetails">支付详情：{{ paymentDetails }}</div>
        <div v-if="showDiscountDetails">优惠详情：{{ discountDetails }}</div>
        <div v-if="showStoreAddress">门店地址：{{ storeAddress }}</div>
        <div v-if="showStorePhone">门店电话：{{ storePhone }}</div>
<!--        <div v-if="showOfficialAccountQR">公众号二维码：{{ officialAccountQR }}</div>-->
<!--        <div v-if="showMiniProgramQR">小程序二维码：{{ miniProgramQR }}</div>-->
        <div v-if="showThankYouMessage">{{ thankYouMessage }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showStoreName: true,
      showWelcomeMessage: true,
      showTicketType: false,
      showRecipientName: true,
      showContactNumber: true,
      showDeliveryAddress: true,
      showDeliveryTime: true,
      showNotes: true,
      showOrderNumber: true,
      showOrderTime: true,
      showFoodDetails: true,
      showBoxFee: true,
      showDeliveryFee: true,
      showPaymentDetails: true,
      showDiscountDetails: true,
      showStoreAddress: true,
      showStorePhone: true,
      showOfficialAccountQR: true,
      showMiniProgramQR: true,
      showThankYouMessage: true,
      welcomeMessage: '欢迎光临',
      thankYouMessage: '欢迎再次光临',
      storeName: '店名',
      recipientName: "朱伟琦",
      contactNumber: "136****0989",
      deliveryAddress: "宝山区长江路258号中成智谷微盟大厦",
      deliveryTime: "尽快送达",
      notes: "可乐要冰冻的",
      orderNumber: "N201601292218",
      orderTime: "2019-3-9 10:45:53",
      foodItems: [
        { name: "北海帝蟹盖饭/份", quantity: "x1", price: "¥124.0" },
        { name: "餐盒费", quantity: "x2", price: "¥2.0" },
        { name: "配送费", quantity: "", price: "¥10.0" },
      ],
      boxFee: '¥2.0',
      deliveryFee: '¥10.0',
      paymentDetails: '实际支付 ¥205.2',
      discountDetails: '会员余额支付 -¥10.0',
      storeAddress: '宝山区长江路258号中成智谷微盟大厦',
      storePhone: '136****0989',
      // officialAccountQR: 'https://placehold.co/100x100',
      // miniProgramQR: 'https://placehold.co/100x100',
    };
  },
  methods: {
    saveSettings() {
      // 保存设置逻辑
    },
    cancelSettings() {
      // 取消设置逻辑
    },
    resetSettings() {
      // 恢复初始设置逻辑
    },
  },
};
</script>

<style scoped>
.ticket-container {
  display: flex;
  margin: 20px;
}

.ticket-settings {
  flex: 1;
  margin-right: 20px;
}

.ticket-preview {
  flex: 1;
}

.ticket-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.ticket-content {
  margin-bottom: 20px;
}

.ticket-header {
  margin-bottom: 15px;
}

.ticket-items {
  margin-bottom: 15px;
}

.ticket-footer {
  text-align: right;
}
</style>
